<template>
	<div class="hello">
		<el-container>
			<el-header>
				<div class="heard_top">
					<div class="top">
						<div class="top_left">杭州天缘网络欢迎您！</div>
						<div class="top_right">
							<img src="../../assets/wenhao.png" alt="" />
							<span @click="gethelp()">帮助中心</span>
						</div>
					</div>
				</div>
				<div class="heard_bot">
					<div class="bot">
						<div class="top_left">
							<img src="../../assets/ka_pur.png" class="img1" />
							<img src="../../assets/jifenka.png" class="img2" />
						</div>
						<div class="top_right">
							<img src="../../assets/tel.png" alt="" class="img3" />
							<span><b>0571-86538181</b></span>
						</div>
					</div>
				</div>
			</el-header>
			<el-main>
				<el-col :span="24">
					<div class="main_box" v-bind:class="{'accountchangeshort': is1,'telphonechangeshort': is2}">
						<div class="info" v-bind:class="{'accountinfochangeshort': is1,'telphoneinfochangeshort': is2}">
							<img src="../../assets/yellow.png" alt="" />
							<ul class="login_ul">
								<li v-bind:class="{'active': flag1}" @click="accountlogin()">账号登录</li>
								<li v-bind:class="{'active': flag2}" @click="telphonelogin()">短信登录</li>
							</ul>
							<router-view/>
						</div>
					</div>
				</el-col>
				<div class="fore_pic">
					<img src="../../assets/kuaisufenxiao2x.png" alt="" />
					<img src="../../assets/anquanjiaoyi2x.png" alt="" />
					<img src="../../assets/jingzhunjisuan2x.png" alt="" />
					<img src="../../assets/zhuanshukefu2x.png" alt="" />
				</div>
			</el-main>
			<el-footer>
				<div class="foot_top">
					<span>关于我们</span>
					<span>|</span>
					<span>公司荣誉</span>
					<span>|</span>
					<span>联系我们</span>
				</div>
				<div class="foot_bot">Copyright © 2015.版权所有</div>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				flag1: true,
				flag2: false,
				is1: '',
				is2: ''
			}
		},
		mounted(){
			this.change_ul();
		},
		methods: {
			accountlogin: function() {
				this.$router.push({
					name: 'accountlogin'
				});
				this.flag2 = false;
				this.flag1 = true;
				this.is2 = false;
				this.is1 = true;
			},
			telphonelogin: function() {
				let redirect = decodeURIComponent(this.$route.query.redirect);
				if (redirect != 'undefined') {
					this.$router.replace({
                        path: '/loginIndex/telphonelogin',
                        query: {
                            redirect: redirect
                        }
                    });
				} else {
					this.$router.push({
						name: 'telphonelogin'
					});
				}
				this.flag1 = false;
				this.flag2 = true;
				this.is1 = false;
				this.is2 = true;
			},
			change_ul:function(){
				let router =  this.$route.path;
				if(this.isContains(router,"telphonelogin")){
					this.flag1 = false;
					this.flag2 = true;
					this.is1 = false;
					this.is2 = true;
				} else {
					this.flag2 = false;
					this.flag1 = true;
					this.is2 = false;
					this.is1 = true;
				}
			},
			gethelp:function(){
				this.$router.push({
					name: 'help'
				});
			},
			isContains: function(str, substr){			// 判断str字符串是否包含substr字符串
     			return str.indexOf(substr) >= 0;
 			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}
	body{
		margin: 0 !important;
	}
	.el-header {
		width: 100%;
		height: 135px !important;
		padding: 0;
	}
	.heard_top {
		width: 100%;
		height: 40px;
		background-color: #454545;
		color: white;
	}
	.heard_top .top {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		line-height: 40px;
		font-size: 14px;
	}
	.heard_top .top img {
		width: 18px;
		height: 18px;
		vertical-align: top;
		margin-top: 11px;
	}
	.heard_bot {
		width: 100%;
		height: 95px;
		background-color: white;
	}
	.heard_bot .bot {
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		color: #7b5bc7;
		line-height: 95px;
	}
	.top_left .img1 {
		width: 41px;
		vertical-align: top;
		margin-top: 25px;
	}
	.top_left .img2 {
		width: 85px;
		vertical-align: top;
		margin-top: 30px;
		margin-left: 10px;
	}
	.top_right .img3 {
		width: 25px;
		height: 25px;
		vertical-align: top;
		margin-top: 35px;
	}
	.heard_top .top_right span:hover{
		cursor: pointer;
	}
	.el-main {
		padding: 0;
		height: 725px;
	}
	.el-col {
		width: 100%;
		height: 540px;
		background-image: url(../../assets/denglu_beijing.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.el-col .main_box {
		width: 100%;
		height: 462px;
		padding-top: 78px;
	}
	.main_box .info {
		width: 398px;
		height: 382px;
		border: 1px solid #f4f4f4;
		background-color: white;
		border-radius: 3px;
		margin-left: 54.48%;
	}
	.info>img {
		width: 20px;
		margin-left: 10px;
	}
	.info .login_ul {
		width: 334px;
		height: 56px;
		margin: 0 auto;
		line-height: 56px;
		display: flex;
		border-bottom: 1px solid #f4f4f4;
	}
	.login_ul li {
		width: 81px;
		list-style: none;
		font-size: 18px;
		text-align: center;
	}
	.login_ul li:hover {
		cursor: pointer;
	}
	.login_ul li:nth-child(2) {
		margin-left: 10px;
	}
	.active {
		border-bottom: 3px solid #7b5bc7;
	}
	.fore_pic {
		width: 1200px;
		height: 165px;
		margin: 0 auto 0;
		padding-top: 10px;
		padding-bottom: 10px;
		display: flex;
		justify-content: space-between;
	}
	.fore_pic img {
		width: 293px;
	}
	.el-footer {
		width: 100%;
		height: 220px !important;
		padding: 0;
		background-color: #fafafa;
	}
	.foot_top,.foot_bot {
		font-size: 14px;
		color: #666666;
	}
	.foot_top {
		width: 300px;
		text-align: center;
		display: flex;
		margin: 80px auto 0;
	}
	.foot_top span {
		width: 60px;
	}
	.foot_bot {
		width: 200px;
		text-align: center;
		margin: 0 auto 0;
		margin-top: 36px;
	}
	.el-col .accountchangeshort{
		padding-top: 78px;
	}
	.main_box .accountinfochangeshort{
		height: 384px;
	}
	.el-col .telphonechangeshort{
		padding-top: 51px;
	}
	.main_box .telphoneinfochangeshort{
		height: 436px;
	}
</style>